<template>
  <div class="dashboard-container">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 采集点数量 -->
      <el-card class="panel-card collection-points">
        <template #header>
          <div class="card-header">
            <span>采集点数量</span>
          </div>
        </template>
        <div class="points-content">
          <div class="point-item">
            <div class="label">总采集点</div>
            <div class="value">{{ statistics.totalPoints }}</div>
          </div>
          <div class="point-item">
            <div class="label">在线数量</div>
            <div class="value">{{ statistics.onlinePoints }}</div>
          </div>
          <div class="point-item">
            <div class="label">离线数量</div>
            <div class="value">{{ statistics.offlinePoints }}</div>
          </div>
        </div>
      </el-card>

      <!-- 最近上报数据 -->
      <el-card class="panel-card latest-reports">
        <template #header>
          <div class="card-header">
            <span>最近上报数据</span>
          </div>
        </template>
        <div class="scroll-container" ref="scrollContainer">
          <div class="scroll-wrapper" :style="{ transform: `translateY(${scrollTop}px)` }">
            <div class="report-item" v-for="item in latestReports" :key="item.id">
              <div class="device-info">
                <span class="name">{{ item.deviceName }}</span>
                <span class="time">{{ item.reportTime }}</span>
              </div>
              <div class="value-info">
                <span class="value">{{ item.value }}</span>
                <span class="unit">{{ item.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 中间面板 -->
    <div class="center-panel">
      <!-- 日能耗 -->
      <el-card class="panel-card daily-energy">
        <template #header>
          <div class="card-header">
            <span>日能耗</span>
            <el-date-picker
              v-model="dailyDate"
              type="date"
              placeholder="选择日期"
              size="small"
              @change="handleDailyDateChange"
            />
          </div>
        </template>
        <div class="chart" ref="dailyEnergyChart"></div>
      </el-card>

      <!-- 日消耗 -->
      <el-card class="panel-card daily-consumption">
        <template #header>
          <div class="card-header">
            <span>日消耗</span>
          </div>
        </template>
        <div class="chart" ref="dailyConsumptionChart"></div>
      </el-card>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
      <!-- 周统计 -->
      <el-card class="panel-card weekly-stats">
        <template #header>
          <div class="card-header">
            <span>周统计</span>
          </div>
        </template>
        <div class="chart" ref="weeklyStatsChart"></div>
      </el-card>

      <!-- 月统计 -->
      <el-card class="panel-card monthly-stats">
        <template #header>
          <div class="card-header">
            <span>月统计</span>
          </div>
        </template>
        <div class="chart" ref="monthlyStatsChart"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { formatDate } from '@/utils/date'

// 统计数据
const statistics = ref({
  totalPoints: 128,
  onlinePoints: 120,
  offlinePoints: 8
})

// 最近上报数据
const latestReports = ref([
  { id: 1, deviceName: '1号电表', value: '123.45', unit: 'kWh', reportTime: '10:30:25' },
  { id: 2, deviceName: '2号水表', value: '45.67', unit: 'm³', reportTime: '10:30:20' },
  { id: 3, deviceName: '3号气表', value: '78.90', unit: 'm³', reportTime: '10:30:15' },
  // ... 更多数据
])

// 滚动相关
const scrollTop = ref(0)
const scrollContainer = ref<HTMLElement>()
let scrollTimer: number

const startScroll = () => {
  const container = scrollContainer.value
  if (!container) return

  scrollTimer = window.setInterval(() => {
    if (scrollTop.value <= -container.scrollHeight / 2) {
      scrollTop.value = 0
    } else {
      scrollTop.value -= 1
    }
  }, 50)
}

// 图表实例
let dailyEnergyChart: echarts.ECharts | null = null
let dailyConsumptionChart: echarts.ECharts | null = null
let weeklyStatsChart: echarts.ECharts | null = null
let monthlyStatsChart: echarts.ECharts | null = null

// 日期选择
const dailyDate = ref(new Date())

// 修改初始化方式
const chartRef = ref<HTMLElement>()

// 初始化图表
const initCharts = () => {
  // 日能耗图表
  dailyEnergyChart = echarts.init(document.querySelector('.daily-energy .chart'))
  dailyEnergyChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320, 1000],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  })

  // 其他图表初始化...
}

// 生命周期钩子
onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value)
    // ... 设置图表配置
  }
  initCharts()
  startScroll()
})

onUnmounted(() => {
  if (scrollTimer) {
    clearInterval(scrollTimer)
  }
  dailyEnergyChart?.dispose()
  dailyConsumptionChart?.dispose()
  weeklyStatsChart?.dispose()
  monthlyStatsChart?.dispose()
})

const handleDailyDateChange = (date: string) => {
  // 处理日期变化
  console.log('日期变化:', date)
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  height: 100%;
  
  .panel-card {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    :deep(.el-card__header) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 20px;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
    }
  }
  
  // 左侧面板
  .left-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
    
    .collection-points {
      .points-content {
        padding: 20px;
        
        .point-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .value {
            font-size: 18px;
            font-weight: bold;
            color: $primary-color;
          }
        }
      }
    }
    
    .latest-reports {
      flex: 1;
      
      .scroll-container {
        height: 300px;
        overflow: hidden;
        
        .scroll-wrapper {
          transition: transform 0.05s linear;
        }
        
        .report-item {
          padding: 12px 20px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          
          &:last-child {
            border-bottom: none;
          }
          
          .device-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            
            .time {
              color: $text-color-secondary;
              font-size: 12px;
            }
          }
          
          .value-info {
            .value {
              font-size: 16px;
              font-weight: bold;
              color: $primary-color;
              margin-right: 4px;
            }
            
            .unit {
              color: $text-color-secondary;
            }
          }
        }
      }
    }
  }
  
  // 中间面板
  .center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .chart {
      height: 300px;
    }
  }
  
  // 右侧面板
  .right-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
    
    .chart {
      height: 300px;
    }
  }
}
</style>
